<template>
	<div class="options">
		<div class="top">
			<span>当前页数: </span>
			<input v-model="page" type="text" style="width: 100px;margin-right: 200px;">
			<el-select v-model="option1Value" placeholder="请选择">
				<el-option v-for="item in option1" :key="item.id" :label="item.class" :value="item.id">
				</el-option>
			</el-select>
			<el-select v-model="option2Value" placeholder="请选择">
				<el-option v-for="item in option2" :key="item.id" :label="item.class" :value="item.id">
				</el-option>
			</el-select>
		</div>

		<div class="trans fl">
			<el-table
			    ref="multipleTable"
			    :data="tableData"
					@row-click = "rowClick"
					@selection-change = "selectChange"
			    tooltip-effect="dark"
			    style="width: 100%"
					>
			    <el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			    <el-table-column
			      label="id"
						prop="id"
			      width="120">
			      <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
			    </el-table-column>
			    <el-table-column
			      prop="class"
			      label="所属分类"
			      width="120">
			    </el-table-column>
			  </el-table>
		</div>
		<div class="button fl">
			<el-button size="medium" type="primary" @click="submit">提交</el-button>
			<el-button size="medium" @click="resize">重置</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData:[],
				multipleSelection: [],
				page: 1,
				option1: [],
				option1Value: '',
				option2Value: '',
				activeArr:[]
			};
		},
		computed: {
			option2() {
				let newArr = [];
				this.option1.forEach(res => {
					if (res.id == this.option1Value) {
						newArr = res.children
					}
				})
				this.option2Value = '';
				return newArr
			}
		},
		mounted() {
			this.getdata();
			this.getclass();
		},
		methods: {
			//多选
			selectChange(activeArr){
				this.activeArr = activeArr;
			},
			//行点击多选
			rowClick(row){
				console.log(row)
				this.$refs.multipleTable.toggleRowSelection(row);
			},
			//获取数据
			getdata() {
				this.$http.get('https://192.168.0.116:5001/api/admin/tags?index=' + this.page+'&size=5').then(res => {
					let newData = [];
					res.data.forEach(sort => {
						let newObj = {};
						newObj.id = sort.id;
						newObj.class = sort.context;
						newData.push(newObj)
					})
					this.tableData = newData
				})
			},
			//获取类
			getclass() {
				this.$http.get('https://192.168.0.116:5001/api/admin/classes').then(res => {
					this.option1 = res.data;
				})
			},
			//提交
			submit() {
				if(this.option2Value === ''){
					this.$message.error('请选择分类！');
					return
				}
				let Cid = [];
				this.activeArr.forEach(active=>{
					Cid.push(active.id) 
				})
				let Cdata = {
					"Id": Cid,
					"ClassId": this.option2Value
				}
				this.$http.post('https://192.168.0.116:5001/api/admin/tags',Cdata).then(res => {
					this.$message.success('提交成功！')
					this.tableData = this.tableData.filter(item=>{
							return  this.activeArr.indexOf(item) == -1
					})
					//清空
					this.activeArr = [];
					this.resize();
					if(this.tableData.length == 0){
						this.page++;
						this.getdata();
						this.getclass();
					}
				})
			},
			//重置
			resize() {
				//取消多选
				this.$refs.multipleTable.clearSelection();
			}
		}
	}
</script>

<style scoped>
	.button {
		position: absolute;
		bottom: 290px;
		right: 150px;
	}

	.top {
		margin-bottom: 50px;
	}

	.el-select {
		width: 200px;
		margin-right: 20px;
	}

	.options {
		position: relative;
		width: 900px;
		height: 400px;
		margin: 20px auto;
		background-color: #caebf1;
		padding: 20px;
	}
</style>
